<template>
  <a-select
    :value="value?.split(',') || []"
    placeholder="请选择标签"
    mode="multiple"
    :disabled="!subject"
    allow-clear
    @update:value="(v) => emit('update:value', (v as string[]).join(',') || null)"
  >
    <a-select-option
      v-for="item in state.list"
      :key="item.tagId"
      :value="item.tagId"
    >
      <span
        :style="{
          background: item.tagColor,
          color: '#ffffff',
          padding: '0 8px',
          borderRadius: '4px',
        }"
        >{{ item.tagName }}</span
      >
    </a-select-option>
  </a-select>
</template>
<script lang="ts" setup>
import { reactive, watch } from "vue";
import { useFetchList } from "@/hook/useFetchList";
import { queryListBySubject } from "@/api/answer/base-data/tag";
import type { SubjectParams } from "@/api/answer/base-data/tag";

interface Props {
  /**绑定值 */
  value: string;
  /**学科 */
  subject: string;
}
const props = defineProps<Props>();
const emit = defineEmits(["update:value"]);
const params = reactive<SubjectParams>({
  tagSubject: props.subject,
});
const { state, reload } = useFetchList(queryListBySubject, {
  params,
  autoFetch: false,
});
watch(
  () => props.subject,
  (subject, o) => {
    if (o) {
      emit("update:value", null);
    }
    if (subject) {
      params.tagSubject = subject;
      reload();
    }
  },
  { immediate: true }
);
</script>
